<template>
  <div class="panel">
    <panel-title title="商品列表"></panel-title>
    <div class="panel-body">
      <!--搜索框-->
      <el-form :inline="true" class="demo-form-inline" label-position="right"  label-width="100px">
        <el-form-item label="商家名称">
          <el-input v-model="searchSellerName" placeholder="商家名称" style="width: 195px;"></el-input>
        </el-form-item>
        <el-form-item label="价格变动">
          <el-input-number controls-position="right" v-model="searchPriceSectionMin" :min="0"></el-input-number>
          <span>—</span>
          <el-input-number  controls-position="right" v-model="searchPriceSectionMax" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="近七日均销量">
          <el-input-number controls-position="right" v-model="searchSoleSectionMin" :min="0"></el-input-number>
          <span>—</span>
          <el-input-number controls-position="right" v-model="searchSoleSectionMax" :min="0"></el-input-number>
        </el-form-item>
        <br>
        <el-form-item label="商品名称">
          <el-input v-model="searchProductName" placeholder="商品名称" style="width: 195px;"></el-input>
        </el-form-item>
        <el-form-item label="当日均价">
          <el-input-number controls-position="right" v-model="searchAveragePriceYesterdayMin" :min="0"></el-input-number>
          <span>—</span>
          <el-input-number controls-position="right" v-model="searchAveragePriceYesterdayMax" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="近七日平均价">
          <el-input-number controls-position="right" v-model="searchAveragePriceSevenMin" :min="0"></el-input-number>
          <span>—</span>
          <el-input-number controls-position="right" v-model="searchAveragePriceSevenMax" :min="0"></el-input-number>
        </el-form-item><br>
        <el-form-item label="所属区域">
          <el-cascader v-model="searchCity" :options="areaOptions" change-on-select filterable></el-cascader>
        </el-form-item>
        <el-form-item label="历史均价">
          <el-input-number controls-position="right" v-model="searchAveragePriceHistoryMin" :min="0"></el-input-number>
          <span>—</span>
          <el-input-number controls-position="right" v-model="searchAveragePriceHistoryMax" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="销量共享">
          <el-select v-model="isShare" placeholder="请选择">
            <el-option
              v-for="item in isShareOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-row :gutter="24">
            <el-col :span="20">
          <el-button @click="cleanSearch"><i class="fa el-icon-close"></i>&nbsp;清空</el-button>
          <el-button type="primary" @click="getSellerPageDataWithNewPage"><i class="fa fa-search"></i>&nbsp;查询</el-button>
          <el-button type="warning" @click="exportExcel"><i class="fa fa-download"></i>&nbsp;导出</el-button>
        </el-col>
      </el-row>
    <el-table
      :data="clients.data"
      border
      @sort-change="sortChange"
      style="width: 100%">
      <el-table-column
        prop="productId"
        label="商品ID">
      </el-table-column>
      <el-table-column
        prop="productName"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="sellerId"
        label="商家ID">
      </el-table-column>
      <el-table-column
        prop="sellerName"
        label="商家名称">
      </el-table-column>
      <el-table-column
        prop="channel"
        sortable="custom"
        label="一级类目">
      </el-table-column>
      <el-table-column
        sortable="custom"
        prop="cateName"
        label="二级类目">
      </el-table-column>
      <el-table-column
        prop="isShare"
        label="销量共享">
        <template slot-scope="scope">
          {{transformIsShare(scope.row.isShare)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="solds"
        sortable="custom"
        label="累计销量">
      </el-table-column>
      <el-table-column
        prop="topSolds"
        sortable="custom"
        label="最高日销量">
      </el-table-column>
      <el-table-column
        prop="lowSolds"
        sortable="custom"
        label="最低日销量">
      </el-table-column>
      <el-table-column
        prop="daySolds"
        sortable="custom"
        label="当日销量">
      </el-table-column>
      <el-table-column
        prop="price"
        sortable="custom"
        label="价格">
      </el-table-column>
      <el-table-column
        prop="weekAverageSolds"
        sortable="custom"
        label="近七日均销量">
      </el-table-column>
      <el-table-column
        prop="priceSection"
        label="价格变动区间">
      </el-table-column>
      <el-table-column
        prop="dayAveragePrice"
        sortable="custom"
        label="当日均价">
      </el-table-column>
      <el-table-column
        prop="sevenAveragePrice"
        sortable="custom"
        label="近七天均价">
      </el-table-column>
      <el-table-column
        prop="historyAveragePrice"
        sortable="custom"
        label="历史均价">
      </el-table-column>
      <el-table-column
        label="创建日期"
        width="110">
      <template slot-scope="scope">
        {{formatTime(scope.row.createTime)}}
      </template>
      </el-table-column>
      <el-table-column
        label="更新日期"
        width="110">
        <template slot-scope="scope">
          {{formatTime(scope.row.updateTime)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="monitorVersion"
        label="监控版本"
        width="110">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="openNewPage(scope.row.productUrl)">详情</el-button><br>
          <el-button type="text" size="small" @click="showDialog(scope.row.productId)">趋势图</el-button><br>
          <!--<el-button type="text" size="small">导出</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="clients.currentPageNo"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="clients.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="clients.total">
      </el-pagination>
    </div>
  </div>
    <!--对话框-->
    <el-dialog
      title="趋势图"
      :visible.sync="dialogVisible"
      width="50%">

      <solds-chart ref="productTrendChart" :chartData="chartData" :searchDate="searchChartDate" @onDateChange="onDateChange"></solds-chart>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="removeDialog()">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import moment from 'moment'
  import soldsChart from '../../components/chart/soldsChart'
  import {panelTitle} from 'components'
  export default {
    data() {
      return {
        clients: {
          total: 0,
          pageSize: 10,
          currentPageNo: 1,
          data: []
        },
        areaOptions: [{
                  value: null,
                  label: null
                }],
        chartData:{
          timeSeries:[],
          soldSeries:[],
          priceSeries:[]
        },
        searchChartDate: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 7), new Date()],
        chartList:{
          data: []
        },
        isShareOptions: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        searchCity: ['330000', '50'],
        searchProductName:null,
        searchSellerName:null,
        searchSoleSectionMin: 0,
        searchSoleSectionMax: 0,
        searchPriceSectionMin:0,
        searchPriceSectionMax: 0,
        searchAveragePriceYesterdayMin:0,
        searchAveragePriceYesterdayMax:0,
        searchAveragePriceSevenMin:0,
        searchAveragePriceSevenMax:0,
        searchAveragePriceHistoryMin:0,
        searchAveragePriceHistoryMax:0,
        prop: null,
        order: null,
        dialogVisible: false,
        currentProductId: null,
        isShare: null,
      }
    },
    components: {
      soldsChart,
      panelTitle
    },
/*    created() {
      this.sellerSearchData()
      this.getProductPageData()
    },*/

    created() {
      this.sellerSearchData()
      var searchCity = this.$route.params.searchCity
      var searchDay = this.$route.params.day
      if (searchCity != null) {
        this.searchCity = searchCity
        this.searchDay = searchDay
        //获取数据
        this.getProductPageDataByCity(searchCity,searchDay)
      }else {
        this.getProductPageData()
      }

    },

    methods: {
      onDateChange(_chartDate) {
        this.searchChartDate = _chartDate
        this.showDialog()
      },
      //获取下拉列表数据
      sellerSearchData() {
        this.$fetch.apiSeller.sellerSearchData({}).then(({data: data}) => {
            this.areaOptions = data.areaList
        })
      },
      //获取数据
      getProductPageData() {
        this.$fetch.apiProduct.products({
          //查询参数
          provinceId: (this.searchCity != null ? this.searchCity[0] : null),
          cityId: (this.searchCity != null && this.searchCity.length > 1 ? this.searchCity[1] : null),
          areaId: (this.searchCity != null && this.searchCity.length > 2 ? this.searchCity[2] : null),
          pageSize: this.clients.pageSize,
          pageNo: this.clients.currentPageNo,
          productName: this.searchProductName,
          sellerName: this.searchSellerName,
          soleSectionMin: this.searchSoleSectionMin,
          soleSectionMax: this.searchSoleSectionMax,
          priceSectionMin: this.searchPriceSectionMin,
          priceSectionMax: this.searchPriceSectionMax,
          averagePriceYesterdayMin: this.searchAveragePriceYesterdayMin,
          averagePriceYesterdayMax: this.searchAveragePriceYesterdayMax,
          averagePriceSevenMin: this.searchAveragePriceSevenMin,
          averagePriceSevenMax: this.searchAveragePriceSevenMax,
          averagePriceHistoryMin: this.searchAveragePriceHistoryMin,
          averagePriceHistoryMax: this.searchAveragePriceHistoryMax,
          prop: this.prop,
          order: this.order,
          isShare: this.isShare
        }).then(({data: data}) => {
          this.clients = data;
        })
      },

      //获取数据
      getSellerPageDataWithNewPage() {
        this.$fetch.apiProduct.products({
          //查询参数
          provinceId: (this.searchCity != null ? this.searchCity[0] : null),
          cityId: (this.searchCity != null && this.searchCity.length > 1 ? this.searchCity[1] : null),
          areaId: (this.searchCity != null && this.searchCity.length > 2 ? this.searchCity[2] : null),
          pageSize: this.clients.pageSize,
          pageNo: 0,
          productName: this.searchProductName,
          sellerName: this.searchSellerName,
          soleSectionMin: this.searchSoleSectionMin,
          soleSectionMax: this.searchSoleSectionMax,
          priceSectionMin: this.searchPriceSectionMin,
          priceSectionMax: this.searchPriceSectionMax,
          averagePriceYesterdayMin: this.searchAveragePriceYesterdayMin,
          averagePriceYesterdayMax: this.searchAveragePriceYesterdayMax,
          averagePriceSevenMin: this.searchAveragePriceSevenMin,
          averagePriceSevenMax: this.searchAveragePriceSevenMax,
          averagePriceHistoryMin: this.searchAveragePriceHistoryMin,
          averagePriceHistoryMax: this.searchAveragePriceHistoryMax,
          prop: this.prop,
          order: this.order,
          isShare: this.isShare
        }).then(({data: data}) => {
          this.clients = data;
        })
      },


      //获取数据
      getProductPageDataByCity(searchCity,searchDay) {
        this.$fetch.apiProduct.products({
          //查询参数
          provinceId: (searchCity != null ? searchCity[0] : null),
          cityId: (searchCity != null && searchCity.length > 1 ? searchCity[1] : null),
          areaId: (searchCity != null && searchCity.length > 2 ? searchCity[2] : null),
          pageSize: this.clients.pageSize,
          pageNo: this.clients.currentPageNo,
          productName: this.searchProductName,
          sellerName: this.searchSellerName,
          soleSectionMin: this.searchSoleSectionMin,
          soleSectionMax: this.searchSoleSectionMax,
          priceSectionMin: this.searchPriceSectionMin,
          priceSectionMax: this.searchPriceSectionMax,
          searchDay:searchDay,
          averagePriceYesterdayMin: this.searchAveragePriceYesterdayMin,
          averagePriceYesterdayMax: this.searchAveragePriceYesterdayMax,
          averagePriceSevenMin: this.searchAveragePriceSevenMin,
          averagePriceSevenMax: this.searchAveragePriceSevenMax,
          averagePriceHistoryMin: this.searchAveragePriceHistoryMin,
          averagePriceHistoryMax: this.searchAveragePriceHistoryMax,
          prop: this.prop,
          order: this.order,
          isShare: this.isShare
        }).then(({data: data}) => {
          this.clients = data;
        })
      },

      handleClick(row) {
        alert("主图")
        console.log(row);
      },
      handleChange(value) {
        console.log(value);
      },
      handleSizeChange(val) {
        this.clients.pageSize = val
        this.getProductPageData()
      },
      handleCurrentChange(val) {
        this.clients.currentPageNo = val
        this.getProductPageData()
      },
      //弹窗
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
      formatTime(createTime){
          if (createTime == undefined){
              return "";
          }
        return moment(createTime).format("YYYY-MM-DD HH:mm:ss");
      },
      openNewPage(url) {
        window.open(url, 'blank')
      },
      removeDialog(){
        this.dialogVisible = false;

      },
      showDialog(productId) {
        if (productId != undefined) {
          this.currentProductId = productId
        } else {
          productId = this.currentProductId
        }
        this.$fetch.apiProduct.productChartData({
          //查询参数
          productId: productId,
          startTime: moment(this.searchChartDate[0]).format("YYYY-MM-DD"),
          endTime: moment(this.searchChartDate[1]).format("YYYY-MM-DD")
        }).then(({data: data}) => {
            //转换成指定格式
          this.chartData.soldSeries = []
          this.chartData.priceSeries = []
          this.chartData.timeSeries = []
          for ( var i = 0; i <data.chartList.length; i++){
              console.log(data.chartList[i].solds);
            this.chartData.soldSeries.push(data.chartList[i].solds);
            this.chartData.priceSeries.push(data.chartList[i].price);
            this.chartData.timeSeries.push(moment(data.chartList[i].monitor_version).format("YYYY-MM-DD"));

          }

          this.dialogVisible = true;
          if (this.$refs.productTrendChart != undefined) {
            this.$refs.productTrendChart.drawChart()
          }
        })

      },
      cleanSearch() {
          this.searchCity = ['330000', '50']
          this.searchSellerName = null
          this.searchProductName = null
          this.searchSoleSectionMin = null
          this.searchSoleSectionMax = null
          this.searchPriceSectionMin = null
          this.searchPriceSectionMax = null
          this.searchAveragePriceYesterdayMin = null
          this.searchAveragePriceYesterdayMax = null
          this.searchAveragePriceSevenMin = null
          this.searchAveragePriceSevenMax = null
          this.searchAveragePriceHistoryMin = null
          this.searchAveragePriceHistoryMax = null
          this.isShare = null
      },
      //导出表格
      exportExcel(){
        this.$fetch.apiProduct.exportExcel({
          //查询参数
          //查询参数
          provinceId: (this.searchCity != null ? this.searchCity[0] : null),
          cityId: (this.searchCity != null && this.searchCity.length > 1 ? this.searchCity[1] : null),
          areaId: (this.searchCity != null && this.searchCity.length > 2 ? this.searchCity[2] : null),
          pageSize: this.clients.pageSize,
          pageNo: this.clients.currentPageNo,
          productName: this.searchProductName,
          sellerName: this.searchSellerName,
          soleSectionMin: this.searchSoleSectionMin,
          soleSectionMax: this.searchSoleSectionMax,
          priceSectionMin: this.searchPriceSectionMin,
          priceSectionMax: this.searchPriceSectionMax,
          averagePriceYesterdayMin: this.searchAveragePriceYesterdayMin,
          averagePriceYesterdayMax: this.searchAveragePriceYesterdayMax,
          averagePriceSevenMin: this.searchAveragePriceSevenMin,
          averagePriceSevenMax: this.searchAveragePriceSevenMax,
          averagePriceHistoryMin: this.searchAveragePriceHistoryMin,
          averagePriceHistoryMax: this.searchAveragePriceHistoryMax,
        });
      },
      sortChange(column, prop, order){
        this.prop = column.prop;
        this.order = column.order;
        this.getProductPageData()
      },
      transformIsShare(id) {
        if (id == 0) {
          return "否"
        } else if (id == 1) {
          return "是"
        }else{
          return "未知"
        }
      }
    },
  }
</script>
